<template>
  <div class="login-container">
    <div class="title">铁岭市纪委监委行政办公辅助管理系统</div>
    <div class="login">
      <div class="login-title">欢迎登录</div>
      <a-form @submit="onSubmit" :form="form" style="margin-top: 20px">
        <a-form-item>
          <a-input
            placeholder="请输入用户名"
            autocomplete="autocomplete"
            size="large"
            v-decorator="[
              'username',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入用户名',
                    whitespace: true,
                  },
                ],
              },
            ]"
          >
            <a-icon slot="prefix" type="user" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            size="large"
            placeholder="请输入密码"
            autocomplete="autocomplete"
            type="password"
            v-decorator="[
              'password',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入密码',
                    whitespace: true,
                  },
                ],
              },
            ]"
          >
            <a-icon slot="prefix" type="lock" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            :loading="logging"
            style="width: 100%; margin-top: 24px"
            size="large"
            htmlType="submit"
            type="primary"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user';
export default {
  name: 'login',
  components: {},
  data() {
    return {
      logging: false,
      error: '',
      form: this.$form.createForm(this),
    };
  },
  computed: {},
  methods: {
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true;
          const username = this.form.getFieldValue('username');
          const password = this.form.getFieldValue('password');
          login({ username, password })
            .then(async (response) => {
              console.log(response);
              if (response.code == 200) {
                // 存到cookie
                this.$store.dispatch('user/setToken', response.data);
                await this.$store.dispatch('user/getUserLoginInfo');
                this.$router.push('/report');
              } else {
                this.$message.error(response.message);
              }
              this.logging = false;
            })
            .catch((error) => {
              console.log(error);
              this.logging = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ant-form-explain {
  text-align: start;
}
::v-deep .ant-input-prefix {
  color: rgba(0, 0, 0, 0.65);
}
.login-container {
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/bg.jpg);
  background-size: cover;
  position: absolute;
  .title {
    color: aliceblue;
    font-size: 251%;
    font-weight: 600;
    // margin-top: 2%;
  }
  .login {
    margin: 0 auto;
    margin-top: 10%;
    width: 350px;
    height: 350px;
    padding: 40px;
    overflow: hidden;
    background-image: url(@/assets/images/denglukuang.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .login-title {
      color: aliceblue;
      font-size: 1.3rem;
      font-weight: 600;
    }
  }
}
</style>
